<template>
  <div class="zhiboxiaoshou_fabu2">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right" style="position: relative;">
        <div class="zhiboxitong_right">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou' }">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>发布直播页</el-breadcrumb-item>
          </el-breadcrumb> -->
          <div class="flex">
            <div style="width: 800px;" class="flex">
              <div style="width: 300px;">
                <div style="margin: 20px 0; font-weight: bold;">装修店铺</div>

                 <!-- <el-button type="primary" style="bottom: 20px 0;">选择模板</el-button> -->
                 <div style="width: 100px; height:100px; background:#eaeaea;margin: 20px 0; cursor: pointer;" class="flexcc" @click="add(1)">
                   <img src="https://static.91haoka.cn/gantanhao/tianjia1.png" style="width: 70px;">
                 </div>
                 <div class="tianjiatit" @click="add(1)">增加图片模块</div>
                 <div style="width: 100px; height:100px; background:#eaeaea;margin-bottom: 20px; cursor: pointer;" class="flexcc" @click="add(2)">
                   <img src="https://static.91haoka.cn/gantanhao/tianjia2.png" style="width: 70px;">
                 </div>
                 <div class="tianjiatit" @click="add(2)">增加文字说明</div>
                 <div style="width: 100px; height:100px; background:#eaeaea;margin-bottom: 20px; cursor: pointer;" class="flexcc" @click="add(3)">
                   <img src="https://static.91haoka.cn/gantanhao/tianjia3.png" style="width: 70px;">
                 </div>
                 <div class="tianjiatit" @click="add(3)">轮播图模块</div>
				 <div style="width: 100px; height:100px; background:#eaeaea;margin-bottom: 20px; cursor: pointer;" class="flexcc" @click="add(4)">
				 				   <img src="https://static.91haoka.cn/gantanhao/tianjia4.png" style="width: 70px;">
				 				 </div>
				 				 <div class="tianjiatit" @click="add(4)">增加导航</div>
              </div>
              <div class="flex">
                <div class="fleft">
                  <div style="height: 620px; overflow: auto;">
                    <div class="li" v-for="(item,index) in list" :key="index"  :class="bianjiindex == index?'bianjizhong':''" >
                      <div v-if="item.type == 1" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.img" class="awu">请点击编辑图片...</div>
                        <div v-if="item.img"><img :src="item.img" ></div>
                      </div>
                      <div v-if="item.type == 2" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div v-if="!item.text" class="awu">请点击编辑文字....</div>
                        <div v-if="item.text" style="font-size: 12px;padding: 10px;color: #666;">{{item.text}}</div>
                      </div>
                      <div v-if="item.type == 3" @click="bianji(item,index,$event)" :ref="'li'+index" style="width: 100%;height: 200px;">
                        <el-carousel height="200px" arrow="never" >
                            <el-carousel-item v-for="(item2,index2) in item.list" :key="index2" :style="{background:'url('+item2.img+')',backgroundSize:'cover'}">
                              <div v-if="!item2.img" class="awu">请先编辑图片...</div>
                              <!-- <div v-if="item2.img"><img :src="item2.img" ></div> -->
                            </el-carousel-item>
                          </el-carousel>
                      </div>
                      <div v-if="item.type == 4" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div class="flex" style="justify-content: space-around;padding: 20px 0;">
                          <div class="nav" v-for="(item2,index2) in item.list" :key="index2" v-if="item2.isshow">

                            <div class="flexcc" v-if="item2.img"><img :src="item2.img"/></div>
                            <div class="flexcc" v-if="!item2.img"><img src="../assets/img/fengjing.jpg"/></div>
                            <div v-if="item2.name" style="font-size: 12px;">{{item2.name}}</div>
                          </div>
                        </div>
                      </div>
                      <div v-if="item.type == 5" @click="bianji(item,index,$event)" :ref="'li'+index">
                        <div class="flex" v-if="item.radio == 1">
                          <div class="yige flex" v-for="item2 in item.list" :key="index2">
                            <div class="shopliimg"><img :src="item2.img"/></div>
                            <div class="shopliname">
                              <div style="line-height: 20px;">{{item2.name}}</div>
                              <div class="flexbc" style="height: 49px;">
                                <div style="color: #E90010;">￥1.99</div>
                                <div style="color: #E90010;border: 1px #E90010 solid;border-radius: 15px;padding: 5px 10px;">立即抢购</div>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="flexb" v-if="item.radio == 2">

                          <div class="liangge " v-for="item2 in item.list" :key="index2">
                            <div class="shopliimg"><img :src="item2.img"/></div>
                            <div class="shopliname">
                              <div style="line-height: 20px;">{{item2.name}}</div>
                              <div style="color: #E90010;">￥1.99</div>
                            </div>
                          </div>

                        </div>
                      </div>

                    </div>

                  </div>


                </div>

                <div class="shunxu" v-if="bianjiindex != null" :style="{top:bianjitop+'px'}">
                  <div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shang.png" @click="shang()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/xia.png" @click="xia()"></div>
                    <div><img src="https://static.91haoka.cn/gantanhao/shanchu.png" @click="shan()" v-if="bianjitype == 1 || bianjitype == 2 || bianjitype == 3 || bianjitype == 4"></div>
                  </div>

                </div>

              </div>
            </div>



          </div>
          <!-- <div class="flex" style="margin: 20px 0;">
            <el-button type="primary" @click="add(1)">添加图片模块</el-button>
            <el-button type="primary" @click="add(2)">添加文字模块</el-button>
            <el-button type="primary" @click="add(3)">添加轮播图模块</el-button>
          </div> -->

          <div style="width: 550px; position: absolute; right:10px; top:10px; background:#FAFAFA; height:calc(100vh - 90px); overflow: auto;" v-if="bianjitype != null">
              <div class="flex" >


                <div class="fright" style="margin-left:0;">
                  <div v-if="bianjitype == 1">
                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">编辑图片:</div>
                    <div class="flexc" style="margin-bottom: 20px;">
                      <div class="z">上传图片:</div>
                      <div class="r" style="position: relative;">

                        <chuantu ref="chuantu" @getimg="getimg" :widths="'365px'" :heights="'130px'" v-if="relo" :imgs="list[bianjiindex].img"></chuantu>
                      </div>
                      <div style="margin-left:20px;">
                        <div style="font-size: 14px; color:#999; ">1.建议宽度：750ppi 高度不限</div>
                        <div style="font-size: 14px; color:#999; ">2.上传格式：jpg/jpeg/png</div>
                      </div>
                    </div>
                     <!-- <div class="flexc" style="margin-bottom: 20px; ">
                       <div class="z">跳转链接:</div>
                       <div class="r">
                         <el-input v-model="list[bianjiindex].url" placeholder="请输入跳转链接"></el-input>
                       </div>
                     </div> -->

                  </div>

                  <div v-if="bianjitype == 2">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">编辑文字:</div>
                       <div class="r" style="width: 300px;">
                         <el-input v-model="list[bianjiindex].text" :rows="4" type="textarea" placeholder="请输入文字介绍"></el-input>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 3" >

                    <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">banner设置:</div>
                    <el-button type="primary" @click="add2()" style="margin-left: 20px; margin-bottom:20px;" :disabled="list[bianjiindex].list && list[bianjiindex].list.length >= 5">增加一张</el-button>
                    <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="margin-bottom: 20px; border-bottom:1px #ddd solid;">
                      <div class="flexc" style="margin-bottom: 20px;">
                        <div class="z">图片{{index+1}}:</div>
                        <div class="r" style="position: relative;" >
                          <chuantu ref="chuantu2" @getimg="getimg2($event,index)" :widths="'365px'" :heights="'130px'"  :shows="true" v-if="relo" :imgs="item.img"></chuantu>
                        </div>
                      </div>
                       <!-- <div class="flexc" style="margin-bottom: 20px;">
                         <div class="z">跳转链接:</div>
                         <div class="r">
                           <el-input v-model="item.url" style="width: 365px;" placeholder="请输入跳转链接"></el-input>
                         </div>
                       </div> -->
                    </div>
                    <div style="padding: 0 20px;">

                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">1.建议尺寸：730x260像素，尺寸不匹配时，图片将被压缩或拉 伸以铺满画面，多张照片将会轮播形式展示</div>
                      <div style="font-size: 14px; color:#999; margin-bottom:20px;">2.上传格式：jpg/jpeg/png</div>
                    </div>
                  </div>


                  <div v-if="bianjitype == 4">
                     <div style="margin-bottom: 20px;">
                       <div class="z" style="font-weight: bold; font-size: 16px; margin-bottom:20px;">菜单设置:</div>
                       <div class="r">
                          <!-- <el-button type="danger" size="medium" @click="add3()" style="margin-left: 30px;">添加菜单</el-button> -->
                          <div class="flex" style="padding: 0 30px;">
                            <div v-for="(item,index) in list[bianjiindex].list" :key="index" style="text-align: center; margin:20px 10px; width:64px;">
                              <div style="padding: 2px;  border:1px #fff dashed;" :class="bianjicaidan == index?'actcaidan':''">
                                <img v-if="item.img" :src="item.img" style="width: 60px; height:60px;" @click="bianjicaidan = index">
                                <i v-if="!item.img" @click="bianjicaidan = index" class="el-icon-plus avatar-uploader-icon" style="width: 60px; line-height: 60px; height:60px; border:1px #eaeaea dashed;"></i>
                              </div>
                              <el-switch
                                @change="changenav($event,index)"
                                style="margin-top: 5px;"
                                v-model="item.isshow"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                              </el-switch>
                              <!-- <div style="margin: 10px 0; font-size: 12px; color:#999;">{{item.name}}</div>
                              <div style="margin: 10px 0; font-size: 12px; color:#999;" @click="shanchu(index)">删除</div> -->
                            </div>
                          </div>
                         <div class="flexc" v-for="(item,index) in list[bianjiindex].list">
                           <!-- <div class="z">菜单{{index+1}}:</div> -->
                           <div class="r" style="padding-left: 30px;" v-if="bianjicaidan == index">
                             <div style="margin: 20px 0 10px;">更改图标：</div>
                             <chuantu ref="chuantu2" :widths="'100px'" :heights="'100px'" @getimg="getimg3($event,index)"></chuantu>
                             <div style="margin: 20px 0 10px;">菜单名称：</div>
                             <el-input style="margin: 10px 0;" v-model="list[bianjiindex].list[index].name" placeholder="请输入菜单名称"></el-input>
                             <!-- <div style="margin: 20px 0 10px;">关联页面：</div>
                             <div style="margin-top:10px;">
                               <el-radio-group v-model="item.dizhi">
                                   <el-radio :label="1">自定义</el-radio>
                                   <el-radio :label="2">联系客服</el-radio>
                                   <el-radio :label="3">查看订单</el-radio>
                                 </el-radio-group>
                             </div>
                             <div style="margin-top:10px;"><el-input v-if="item.dizhi == 1" v-model="item.url" placeholder="请输入图片链接"></el-input></div> -->
                           </div>


                         </div>
                       </div>
                     </div>
                  </div>

                  <div v-if="bianjitype == 5">
                     <div class="flexc" style="margin-bottom: 20px;">
                       <div class="z">分栏:</div>
                       <div class="r">
                          <el-radio v-model="list[bianjiindex].radio" label="1">一排一个</el-radio>
                          <el-radio v-model="list[bianjiindex].radio" label="2">一排俩</el-radio>
                       </div>
                     </div>
                  </div>

                </div>
              </div>
          </div>

          <div style="height: 100px;" class="flexcc">
            <el-button type="danger" size="medium" @click="xiayibu()">保存并发布</el-button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    name: "zhiboxiaoshou_fabu2",
    data() {
      return {
        bianjicaidan:0,

        list: [

        ],
        tongbuall: "",
        log: false,

        input: "",
        all: {
          erweima: ""
        },
        all2: {
          erweima: ""
        },
        bianjiindex:null,
        bianjitype:null,
        bianjitop:-9999,

        relo:false
      }
    },
    created() {
      // console.log(this.list.includes(item=>item.type == 4))
      // 现在path 支持store和page 分别是存直播间和商品页的目录

      // let wenjianjia = 'web-store'
      let wenjianjia = 'test-web-store'
      if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
        wenjianjia = 'web-store'
      }
      if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
        wenjianjia = 'test-web-store'
      }
	  if(window.location.href.includes('localhost')){
	    wenjianjia = 'test-web-store'
	  }
      axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
      // axios.get(`${this.apis}/storage/web-store/${this.$route.query.id}.json?v=${Math.random()}`)
        .then(response => {
          if(response.data){
            this.list = JSON.parse(response.data)
            console.log('读取以往文件进行兼容')
            console.log(this.list)
            for(var x=0;x<this.list.length;x++){
              if(this.list[x].type==4){
                for(var y=0;y<this.list[x].list.length;y++){
                  if(this.list[x].list[y].isshow==undefined){
                    this.list[x].list[y].isshow=true
                  }
                  
                }
              }
            }
          }else{

          }
        })
        .catch(err =>{
          if(this.list.findIndex(item=>item.type == 4) == -1){
            this.list.push(
              {
                type:4,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:"",isshow:true},
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html",isshow:true},
                  {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html",isshow:true},
                ]
              }
            )
          }
          if(this.list.findIndex(item=>item.type == 5) == -1){
            this.list.push(
              {
                type:5,
                list:[
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp2.jpg",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp3.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp4.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp5.png",name:"标题实例"},
                  {img:"https://static.91haoka.cn/gantanhao%2Fsp.png",name:"标题实例"},
                ],
                radio:"1"
              }
            )
          }
        })


    },
    mounted() {

    },
    methods: {
      changenav(e,index){
        console.log(e,index)
        var newitem = this.list[this.bianjiindex].list
        var changeitem = this.list[this.bianjiindex].list[index]
        changeitem.isshow = e
        // this.list[this.bianjiindex].list[index].isshow = e

        this.$set(newitem,index,changeitem)
      },
      shanchu:function(index){

        this.list[this.bianjiindex].list.splice(index,1)
      },
      add3:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"https://static.91haoka.cn/gantanhao/dh3.png",name:"名称",dizhi:1,url:""},
          )
        }
      },

      xia:function(){

        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex + 1

        if(index2 < arr.length){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shang:function(){
        let arr = this.list
        let index1 = this.bianjiindex
        let index2 = this.bianjiindex - 1
        if(index2 >= 0){
          [arr[index1] , arr[index2]]  = [arr[index2] , arr[index1]]
          this.bianjiindex = index2
        }
      },
      shan:function(){

        // console.log(this.bianjitype)
        // console.log(this.list[this.bianjiindex])
        // if(this.bianjitype == 4){
        //   this.list[this.bianjiindex].list = [
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:""},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html"},
        //       {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html"},
        //     ]
        // }else{
        //   this.list.splice(this.bianjiindex,1)
        //   this.bianjitype = this.list[this.bianjiindex].type
        // }
        this.list.splice(this.bianjiindex,1)
        this.bianjitype = this.list[this.bianjiindex].type
      },

      bianji:function(item,index,e){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type
        // this.bianjitop = e.target.offsetTop
        // console.log(e)
        // console.log(this.bianjitop)


        if(item.type == 1 && this.list[this.bianjiindex].img != undefined){
          // this.$nextTick(()=>{
          //   this.$refs.chuantu.img = this.list[this.bianjiindex].img
          // })
        }
        if(item.type == 2){

        }
        if(item.type == 3){
          this.$nextTick(()=>{
            this.list[this.bianjiindex].list.forEach((item2,index2)=>{
              this.$refs.chuantu2[index2].img = item2.img
            })
          })
        }

        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      bianji2:function(item,index){

        // this.$refs.chuantu.img = item.img
        this.bianjiindex = index
        this.bianjitype = item.type



        this.$nextTick(()=>{
          this.list[this.bianjiindex].list.forEach((item2,index2)=>{
            console.log(item2)
            this.$refs.chuantu2[index2].img = item2.img
          })
        })
      },
      add2:function(){
        if(this.list[this.bianjiindex].list.length < 5){
          this.list[this.bianjiindex].list.push(
            {img:"",url:""}
          )
        }
      },
      add:function(type){
        if(type == 1){
          this.list.unshift(
            {type:1,img:"",url:""}
          )
        }

        if(type == 2){
          this.list.unshift(
            {type:2,text:""}
          )
        }

        if(type == 3){
          this.list.unshift(
            {
              type:3,list:[
                {img:"",url:""}
              ],
            }
          )
          this.relo = false
          this.$nextTick(()=>{
            this.relo = true
          })
        }
		if(type == 4){
				  this.list.unshift(
				    {type:4,list:[
				      {img:"https://static.91haoka.cn/gantanhao%2Fdh1.png",name:"号卡列表",dizhi:1,url:"",isshow:true},
				      {img:"https://static.91haoka.cn/gantanhao%2Fdh4.png",name:"联系客服",dizhi:2,url:"kefu.html",isshow:true},
				      {img:"https://static.91haoka.cn/gantanhao%2Fdh5.png",name:"订单查询",dizhi:3,url:"dingdan.html",isshow:true},
				    ]}
				  )
				}

        this.bianjiindex = 0
        this.bianjitype = type
      },
      getimg: function(img) {
        this.list[this.bianjiindex].img = img
      },
      getimg2:function(img,index){
        // this.list[this.bianjiindex].list[index].img = img
        if(img == ''){
          this.list[this.bianjiindex].list.splice(index,1)
        }else{
          this.list[this.bianjiindex].list[index].img = img
        }
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      getimg3:function(img,index){
        this.list[this.bianjiindex].list[index].img = img
      },


      xiayibu:function(){

        var Obj2str = function(o) {
            if (o == undefined) {
                return "";
            }
            var r = [];
            if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
            if (typeof o == "object") {
                if (!o.sort) {
                    for (var i in o)
                        r.push("\"" + i + "\":" + Obj2str(o[i]));
                    if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                        r.push("toString:" + o.toString.toString());
                    }
                    r = "{" + r.join() + "}"
                } else {
                    for (var i = 0; i < o.length; i++)
                        r.push(Obj2str(o[i]));
                    r = "[" + r.join() + "]";
                }
                return r;
            }
            return o.toString().replace(/\"\:/g, '":""');
        }


        // let wenjianjia = 'web-store'
        let wenjianjia = 'test-web-store'
        if(process.env.NODE_ENV === 'development'){
          // wenjianjia = 'test-web-store'
        }
        if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
          wenjianjia = 'web-store'
        }
        if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
          wenjianjia = 'test-web-store'
        }

        axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${this.$route.query.id}.json`})
          .then(response => {
            var that = this
            if(response.data.msg.code == 0){
              const observer = {
                next(res){
                  
                },
                error(err){
                  
                },
                complete(res){
                  
                  that.$message.success('发布成功');

                  that.$router.push({
                    path:'/zhiboxitong/xiaochengxu/xcxstorelist',
                    query:{
                      app_id:that.$route.query.app_id,
                      xcxtype:that.$route.query.xcxtype
                    }
                  })
                }
              }

              let files = Obj2str(JSON.stringify(this.list))
              let file = new File([files], `${wenjianjia}/${this.$route.query.id}.json`, {type: 'application/json'});
              const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
              const subscription = observable.subscribe(observer) // 上传开始
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        // let all = {
        //       "id": this.$route.query.id,
        //       "type": "json",
        //       "path": "store",
        //       "data": JSON.stringify(this.list)
        // }
        // axios.post(`${this.apis}/api/page/json`,all)
        //   .then(response => {
        //     if(response.data.msg.code == 0){

        //       this.$message.success('发布成功');
        //       // this.go('/zhiboxitong/xiaochengxu')
        //       this.$router.push({
        //         path:'/zhiboxitong/xiaochengxu/xcxstorelist',
        //         query:{
        //           app_id:this.$route.query.app_id
        //         }
        //       })
        //     }else{
        //       this.$message.error(response.data.msg.info);
        //     }
        //   });
      },
      getxq:function(){
        axios.get(`${this.apis}/api/store/info?id=${this.$route.query.id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.all = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      }
    }
  }
</script>

<style scoped lang="less">
  .zhiboxiaoshou_fabu2 {
    background: #f2f2f2;
    color: #333;
    min-height: 100vh;
    img{ display: block;}
    /deep/ .el-breadcrumb {
      font-size: 16px;
    }

    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 0px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 0px;
    }

    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }

    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }

    * {
      box-sizing: border-box;
    }

    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;
      }

      .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
      .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
      .r{}

      .right {
        width: calc(100vw - 220px);
        padding: 10px;

        .zhiboxitong_right {
          height: calc(100vh - 90px);
          overflow: auto;
          background: #fff;
          border-radius: 5px;
          padding: 20px;
        }
        .tianjiatit{margin-bottom: 40px; cursor: pointer; font-size: 12px; text-align:center; width: 100px;}
        .shunxu{ padding: 50px 20px; border-radius: 5px;
          img{ width: 15px;margin-bottom: 10px; cursor: pointer;}
        }
        .actcaidan{ border: 1px #F56C6C dashed !important;}
        .fleft {
            width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
          .li{
            width: 100%; padding: 2px;  border: 1px #eaeaea dashed; margin-bottom: 20px; cursor: pointer;
            img{ width: 100%; display: block;}
            .nav{ text-align: center;  flex: 1;
              img{ width: 34px; height:34px;border-radius: 3px;margin-bottom: 10px;}
            }
          }
          .bianjizhong{ border-color: #F56C6C;}
          .awu{ padding: 10px; font-size: 12px;color: #999;}

          // .yihang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 100%; margin-bottom: 10px;}
          // }
          // .lianghang{ justify-content: space-between; padding: 5px;
          //   .shopli{width: 48%; margin-bottom: 10px;}
          // }
          .yige{ margin-bottom: 10px; border-radius: 5px;
            .shopliimg{ width: 89px; margin-right: 10px;
              img{width: 89px;height: 89px; display: block;}
            }
            .shopliname{ color: #999; font-size: 12px;padding: 5px 0;width: 150px;}
          }
          .liangge{width: 123px; border-radius: 5px;
            .shopliimg{ width: 123px;
              img{width: 123px; height: 123px; display: block; }
            }
            .shopliname{ color: #999; font-size: 12px;padding: 5px;}
          }

        }

        .fright {
          margin-left: 100px;
          padding-top: 50px;



        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
